<template>
	<view>
		<view class="topHint">请在下方空白书写区域内写出您的名字</view>
		<view>
			<canvas class="canvas" disable-scroll="true" :style="{'height':height}" canvas-id="designature"
				@touchstart="starts" @touchmove="moves" @touchend="end"></canvas>
		</view>
	</view>
</template>

<script>
	import { getAccessToken } from '@/utils/auth'
	import config from '@/config'
	
	export default {
		name: "signView",
		data() {
			return {
				dom: null,
				line: [],
				radius: 0,
				width: '0rpx',
				height: '0rpx',
				uploadUrl: config.baseUrl + config.baseApi
			}
		},
		mounted() {
			this.dom = uni.createCanvasContext('designature', this);
			this.dom.setFillStyle('#fff')
			uni.getSystemInfo({
				success: (res) => {
					this.dom.fillRect(0, 0, res.windowWidth, res.windowHeight)
					// this.width = res.windowWidth - 60 + 'rpx';
					this.height = res.windowHeight - 315 + 'rpx';
				}
			});
			
		},
		// created() {
		// 	uni.getSystemInfo({
		// 		success: (res) => {
		// 			// this.width = res.windowWidth - 60 + 'rpx';
		// 			this.height = res.windowHeight - 159 + 'rpx';
		// 		}
		// 	});
		// },
		methods: {
			end(e) {},
			distance(a, b) {
				let x = b.x - a.x;
				let y = b.y - a.y;
				return Math.sqrt(x * x + y * y);
			},
			// 开始
			starts(e) {
				this.line.push({
					points: [{
						time: new Date().getTime(),
						x: e.touches[0].x,
						y: e.touches[0].y,
						dis: 0
					}]
				})
				let currentPoint = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				this.currentPoint = currentPoint
				this.drawer(this.line[this.line.length - 1])
			},
			// 滑动
			moves(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				this.lastPoint = this.currentPoint,
					this.currentPoint = point
				this.line[this.line.length - 1].points.push({
					time: new Date().getTime(),
					x: e.touches[0].x,
					y: e.touches[0].y,
					dis: this.distance(this.currentPoint, this.lastPoint)
				})
				this.drawer(this.line[this.line.length - 1])
			},
			// 书写
            drawer(item) {
                let x1, x2, y1, y2, len, radius, r, cx, cy, t = 0.5,
                    x, y;
                var time = 0;
                if (item.points.length > 2) {
                    let lines = item.points[item.points.length - 3];
                    let line = item.points[item.points.length - 2];
                    let end = item.points[item.points.length - 1];
                    x = line.x;
                    y = line.y;
                    x1 = lines.x;
                    y1 = lines.y;
                    x2 = end.x;
                    y2 = end.y;
                    var dis = 0;
                    time = (line.time - lines.time) + (end.time - line.time)
                    dis = line.dis + lines.dis + end.dis;
                    var dom = this.dom;
                    var or = Math.min(time / dis * this.linePressure + this.lineMin, this.lineMax);
                    cx = (x - (Math.pow(1 - t, 2) * x1) - Math.pow(t, 2) * x2) / (2 * t * (1 - t))
                    cy = (y - (Math.pow(1 - t, 2) * y1) - Math.pow(t, 2) * y2) / (2 * t * (1 - t))
                    dom.setLineCap('round')
                    dom.beginPath();
                    dom.setStrokeStyle('black')
                    dom.setLineWidth(5)
                    dom.moveTo(x1, y1);
                    dom.quadraticCurveTo(cx, cy, x2, y2);
                    dom.stroke();
                    dom.draw(true)
                }
            },
			// 清除
			clear() {
				this.dom.clearRect(0, 0, 1000, 1000)
				this.dom.draw()
			},
			// 保存图片
			save() {
				if(this.line.length === 0 ){
					this.$emit('success', '')
					return ;
				}
				uni.canvasToTempFilePath({
					canvasId: 'designature',
					fileType: 'jpg',
					quality: 1, //图片质量
					destWidth: 500,
				    destHeight: 200,
					success: (res) => {
						const tempFilePath = res.tempFilePath;
						uni.getFileSystemManager().readFile({
							filePath: tempFilePath,
							encoding: 'base64',
							success: (res) => {
								let base64Img = res.data
								this.$emit('success', base64Img)
							}
						})
					},
					fail(e) {
						uni.hideLoading()
					}
				}, this)
			}
		}
	}
</script>

<style scoped lang="less">
    .signBox {
    
        .canvas {
            width: 98% !important;
            // background-color: #FFFFFF;
            position: absolute;
            // z-index: 9999;
            left: 0rpx;
            top: 35rpx;
            border: 1rpx solid #d6d6d6;
			margin-top: 30rpx;
        }
        .topHint{
            width: 93%;
            height: 25rpx;
            line-height: 25rpx;
            font-size: 15px;
			background-color: #F6F6F6;
            text-align: center;
			margin-top: 30rpx;
        }
    }
</style>
